import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { CodeBlock } from '@zendeskgarden/react-typography';
import { CODE_BLOCK_CHILDREN as CODE } from './stories/data';
import README from '../README.md';

<Meta title="Packages/Typography/CodeBlock" component={CodeBlock} />

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="CodeBlock"
    args={{ code: CODE, containerProps: { style: { maxHeight: 'calc(100vh - 80px)' } } }}
    argTypes={{ code: { table: { category: 'Story' } } }}
    parameters={{
      design: {
        allowFullscreen: true,
        type: 'figma',
        url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=6739%3A41717'
      }
    }}
  >
    {({ code, ...args }) => <CodeBlock {...args} children={code[args.language || 'tsx']} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
